<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="closeDialog"
    :append-to-body="true"
    :close-on-click-modal="true"
    class="small-common-dialog-size approval-dialog"
  >
    <Title title="协作申请" style="margin-bottom:16px;"/>
    <div class="flex form-item">
      <div class="item-label required">
        客户名称
        <tipIcon content="同时申请多个客户的协作权限时，客户的审批人需为同一人" style="margin-left: 4px;"/>
      </div>
      <div class="item-value">
        <el-input
          v-model="clientName"
          :rows="4"
          :placeholder="`请填写客户全称，多个客户换行即可。例如：\n厦门xxxxx科技有限公司\n福州xxxx科技有限公司`"
          type="textarea"
          resize="none"
          @change="handleClientNameChange"/>
      </div>
    </div>
    <div class="flex form-item">
      <div class="item-label required">
        审批人
        <tipIcon content="优先选择部门主管进行审批" style="margin-left: 4px;"/>
      </div>
      <div class="item-value">
        <el-select
          v-model="approverId"
          size="small"
          clearable
          filterable
          placeholder="请选择审批人"
        >
          <el-option
            v-for="item in approverList"
            :key="item.id"
            :label="item.username"
            :value="item.id"
          />
        </el-select>
      </div>
    </div>
    <div class="flex form-item">
      <div class="item-label">
        是否新建联系人
        <tipIcon use-html content="<div>1、新建的联系人信息仅自己、协作人、主管能查看</div><div>2、审批人无法查看具体的联系人信息</div>" style="margin-left: 4px;"/>
      </div>
      <div class="item-value leading-32">
        <el-radio-group v-model="isCreatContact" :disabled="disabeldCreate">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </div>
    </div>
    <template v-if="isCreatContact">
      <div class="flex form-item">
        <div class="item-label required">客户联系人</div>
        <div class="item-value">
          <el-input :maxlength="50" v-model="creatContact.contactPerson" placeholder="请填写客户联系人" size="small"/>
        </div>
      </div>
      <div class="flex form-item">
        <div class="item-label required">联系方式</div>
        <div class="item-value">
          <el-input :maxlength="50" v-model="creatContact.tel" placeholder="联系方式" size="small"/>
        </div>
      </div>
    </template>
    <div class="flex form-item">
      <div class="item-label">备注</div>
      <div class="item-value">
        <el-input :maxlength="200" v-model="remark" type="textarea" placeholder="备注" size="small"/>
      </div>
    </div>
    <div class="btn-wrap">
      <el-button :loading="loading" type="primary" size="small" @click="handleSubmit">提交申请</el-button>
      <el-button class="cancel-btn-style" type="info" size="small" @click="closeDialog">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';
import ElMessage from '@/utils/message';
import { getApproverList, cooperationCreate } from '@/api/customer';

export default {
  components: { Title },
  data() {
    return {
      dialogVisible: false,
      clientName: '',
      approverId: '',
      approverList: [],
      loading: false,
      isCreatContact: false,
      disabeldCreate: false,
      creatContact: {
        contactPerson: '',
        tel: ''
      },
      remark: ''
    };
  },
  methods: {
    openDialog(name) {
      this.creatContact = {
        contactPerson: '',
        tel: ''
      };
      this.isCreatContact = false;
      this.clientName = name || '';
      if (this.clientName) {
        this.handleClientNameChange(this.clientName);
      }
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
      this.disabeldCreate = false;
      this.clientName = '';
      this.approverId = '';
      this.approverList = [];
      this.remark = '';
    },
    handleClientNameChange(e) {
      this.disabeldCreate = false;
      if (!e) {
        this.approverList = [];
        this.approverId = '';
        this.creatContact = {
          contactPerson: '',
          tel: ''
        };
        this.isCreatContact = false;
      } else {
        try {
          const strArr = e.trim().split('\n');
          const clientList = [...(new Set(strArr))];
          if (clientList.length > 1) {
            this.creatContact = {
              contactPerson: '',
              tel: ''
            };
            this.isCreatContact = false;
            this.disabeldCreate = true;
          }
          this.getApprover({ clientList });
        } catch (error) {
          this.approverList = [];
          this.approverId = '';
        }
      }
    },
    async getApprover(data) {
      try {
        data.notShowNoAuthTip = true;
        const res = await getApproverList(data);
        if (res.code === 200) {
          this.approverList = res.data;
        } else {
          this.approverList = [];
        }
        if (this.approverId) {
          const isExit = this.approverList.some(item => item.id === this.approverId);
          if (!isExit) {
            this.approverId = '';
          }
        }
      } catch (error) {
        this.approverList = [];
        this.approverId = '';
      }
    },
    handleSubmit() {
      if (!this.clientName) {
        ElMessage.error('请输入客户名称');
        return;
      } else if (!this.approverId) {
        ElMessage.error('请选择审批人');
        return;
      }
      if (this.isCreatContact) {
        if (!this.creatContact.contactPerson) {
          ElMessage.error('请输入客户联系人');
          return;
        } else if (!this.creatContact.tel) {
          ElMessage.error('请输入联系方式');
          return;
        }
      }
      const strArr = this.clientName.split('\n');
      const clientList = [...(new Set(strArr))];
      const data = {
        clientList,
        approverId: this.approverId,
        isCreatContact: this.isCreatContact,
        creatContact: this.creatContact,
        remark: this.remark
      };
      this.loading = true;
      cooperationCreate(data).then(res => {
        this.loading = false;
        if (res.code === 200) {
          ElMessage.success('操作成功');
          this.$emit('freshData');
          this.closeDialog();
        } else {
          ElMessage.error(res.message);
        }
      }).catch(() => {
        this.loading = false;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.item-label {
  width: 180px;
  font-size: 14px;
  margin-right: 10px;
  height: 32px;
  display: flex;
  justify-content: end;
  align-items: center;
  &.required::before {
    content: "*";
    color: #F56C6C;
    margin-right: 4px;
  }
}
.leading-32 {
  line-height: 32px;
}
.item-value {
  width: 100%;
  &::v-deep {
    .el-select {
      width: 240px;
    }
    .el-textarea {
      width: 240px;
    }
  }
}
.form-item {
  margin-bottom: 16px;
}
.btn-wrap {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}
.approval-dialog {
  &::v-deep {
    .el-dialog {
      width: 450px !important;
    }
  }
}
</style>
